import React from 'react';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, Button, Menu, Dropdown, Icon } from 'choerodon-ui/pro';
import { FuncType, ButtonType } from 'choerodon-ui/pro/lib/button/enum';
import { Size } from 'choerodon-ui/pro/lib/core/enum';
import Record from 'choerodon-ui/pro/lib/data-set/Record';

enum ShowHelp {
  tooltip = "tooltip",
  newLine = "newLine",
  none = "none",
}

const { Option } = Select;

const passwordValidator = async (value: string | undefined, form: Record | undefined | Form): Promise<boolean | string | undefined> => {
  if (form) {
    if (value !== form.getField('password')?.getValue()) {
      return '您两次输入的密码不一致，请重新输入';
    }
  }
  return true;
};

const menu = () => (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.io/">1st menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.com.cn/">2nd menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/choerodon/choerodon-ui">3rd menu item</a>
    </Menu.Item>
  </Menu>
);

const dropdown = () => (
  <Dropdown overlay={menu()}>
    <Button funcType={FuncType.flat} size={Size.small}>
      Click me <Icon type="arrow_drop_down" />
    </Button>
  </Dropdown>
);

const FormNest: React.FC = (): React.ReactElement => {
  return (
    <>
      <Form style={{ width: '4rem' }}>
        <TextField label="手机号" pattern="1[3-9]\d{9}" name="phone" required clearButton addonBefore="+86" addonAfter="中国大陆" />
        <Password label="密码" name="password" required />
        // @ts-ignore
        <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} help="请输入与上方相同的密码" showHelp={ShowHelp.tooltip} />
        <NumberField label="年龄" name="age" min={18} step={1} required help="我们需要确定你的年龄" addonAfter="周岁" />
        <SelectBox label="性别" name="sex" required>
          <Option value="M">男</Option>
          <Option value="F">女</Option>
        </SelectBox>
        <Select label="语言" name="language" required help="超过两行的帮助信息超过两行的帮助信息超过两行的帮助信息">
          <Option value="zh-cn">简体中文</Option>
          <Option value="en-us">英语(美国)</Option>
          <Option value="ja-jp">日本語</Option>
        </Select>
        <EmailField label="邮箱" name="email" required addonAfter={dropdown()} />
        <UrlField label="个人主页" name="homepage" required addonBefore="Http://" />
        <DatePicker label="生日" name="birth" required />
        <div>
          <div>
            <Button type={ButtonType.submit}>注册</Button>
            <Button type={ButtonType.reset} style={{ marginLeft: 8 }}>重置</Button>
          </div>
        </div>
      </Form>
    </>
  );
};

export default FormNest;